<template>
	<view class="swiper-wrap">
		<swiper class="swiper" circular :autoplay="true" :interval="3000" :duration="1000" @change="changeSwiper">
			<swiper-item @click="swpJump(item)" v-for="(item,index) in swiperList" :key="index">
				<view class="swiper-item">
					<image :src="item.img" mode="aspectFill"></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="swiper-dots">
			<view class="swiper-dot" :class="{active: curentIndex === index}" v-for="(item,index) in swiperList" :key="index"></view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			swiperList: {
				type: Array,
				default: function() {
					return []
				}
			}
		},
		data() {
			return {
				curentIndex: 0
			};
		},
		methods: {
			changeSwiper(e) {
				this.curentIndex = e.detail.current
			},
			// 去web-view
			selectFile(url) {
				// this.upfile = true
				uni.navigateTo({
					url: '/pagesTravel/web-view-local?url=' + url
				})
			},
			// 轮播图页面跳转
			swpJump(item) {
				if (item.linkType == '1') {  // linkType 1.主页面 2.固定页面 3.富文本页面
					uni.switchTab({
						url: item.miniLink
					});
				} else if (item.linkType == '2') {
					uni.navigateTo({
						url: item.miniLink
					})
				}else  if (item.linkType == '3') {
					uni.navigateTo({
						url: '../../pagesTravel/fwbPage?id='+ item.linkId
					})
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	.swiper-wrap {
		position: relative;

		.swiper {
			width: 690rpx;
			height: 280rpx;
			margin: 0 auto;
			border-radius: 12rpx;
			overflow: hidden;
		}

		.swiper-dots {
			position: absolute;
			bottom: 20rpx;
			left: 50%;
			transform: translateX(-50%);
			z-index: 2;

			.swiper-dot {
				width: 32rpx;
				height: 6rpx;
				border-radius: 3rpx;
				background-color: #ccc;
				float: left;
				margin-right: 10rpx;

				&:last-child {
					margin-right: 0;
				}

				&.active {
					background-color: #fff;
				}
			}
		}
	}
</style>
